<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="purchaseOrderNumber" label="订单编号" width="250" align="center" >
        <template slot-scope="scope">
          <a href="javascript:void(0)" @click="details(scope.row)">{{scope.row.purchaseOrderNumber}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="totalAmount" label="总数量" width="120" align="center"></el-table-column>
      <el-table-column prop="totalPrice" label="总金额" width="120" align="center"></el-table-column>
      <el-table-column prop="registerTime" label="登记时间" width="250" align="center"></el-table-column>
      <el-table-column prop="conveyTag" label="配送状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.conveyTag == 'P001-1'" type="danger">未配送</el-tag>
          <el-tag v-if="scope.row.conveyTag == 'P001-2'" type="success">已配送</el-tag>
          <el-tag v-if="scope.row.conveyTag == 'P001-3'" type="success">已送达</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="conveyTag" label="收货状态" width="120" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.conveyTag == 'P001-1'" type="danger">未收货</el-tag>
          <el-tag v-if="scope.row.conveyTag == 'P001-2'" type="danger">未收货</el-tag>
          <el-tag v-if="scope.row.conveyTag == 'P001-3'" type="success">已收货</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="delivery(scope.row)" type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="50%" @close="dialogClose">
      <el-descriptions class="margin-top"  :column="2" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单编号
          </template>
          {{row.purchaseOrderNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            公司名称
          </template>
          {{supplier.companyName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人
          </template>
          {{supplier.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单总数
          </template>
          {{row.totalAmount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单总金额
          </template>
          {{row.totalPrice}}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="row.purchaseOrderDetails" border style="width: 100%">
        <el-table-column prop="price" label="商品名称" width="180px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.name}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="150px" align="center"></el-table-column>
        <el-table-column prop="count" label="数量" width="150px" align="center"></el-table-column>
        <el-table-column prop="unit" label="单位" width="150px" align="center">
          <template slot-scope="scope">
            {{scope.row.product.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="subtotal" label="总金额" width="150px" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" >取 消</el-button>
        <el-button v-if="deliveryOrNot" type="primary" @click="shipping">派送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SupplierOrder',
  components: {},
  props: {},
  data () {
    return {
      supplier:'',
      tableData: [],
      currentPage : 1,
      total : 0,
      pageSize : 5,
      dialogFormVisible : false,
      row:{},
      deliveryOrNot : false
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initSupplier(){
      this.supplier = this.$store.state.supplier
    },
    handleSizeChange(val) {//页大小改变时
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.InitializeThePage();
    },
    handleCurrentChange(val) {//页码发生改变时
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.InitializeThePage();
    },
    InitializeThePage(){
      let formData = new FormData();
      formData.append('supplierId', this.supplier.supplierId);
      formData.append('currentPage', this.currentPage);
      formData.append('pageSize', this.pageSize);
      this.$axios.post("http://localhost:8090/purchase-order/getSupplierOrderBySupplierId", formData).then(({ data }) => {
        this.tableData = data.records;
        console.log(data);
      });
    },
    delivery(row){
      this.row = row;
      this.dialogFormVisible = true;
      this.deliveryOrNot = true
    },
    details(row){
      this.row = row;
      this.dialogFormVisible = true;
    },
    dialogClose(){
      this.dialogFormVisible = false;
    },
    shipping(){
      let formData = new FormData();
      formData.append('purchaseId', this.row.purchaseId);
      this.$axios.post("http://localhost:8090/purchase-order/shipping", formData).then(({ data }) => {
        if (data !== null && data !== undefined) {
          this.$notify({
            title: '派送成功',
            message: '派送成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.InitializeThePage();
        }else {
          this.$notify({
            title: '派送失败',
            message: '派送失败！',
            type: 'warning'
          });
        }
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initSupplier();
    this.InitializeThePage();
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
